<script setup name="customVisualPannel">
import { customVisualPannelList } from '@/api/clientManagement/customVisualPannel'
import { userStore as useUserStore } from '@/pinia/user'

const userStore = useUserStore()
const pictureList = ref([])
const container = ref()
const { profile } = storeToRefs(userStore)
const socket = inject('socket')

const height = ref(0)
const loadData = async () => {
  const { data } = await customVisualPannelList({
    companyID: profile.value.companyID
  })
  pictureList.value = data
  height.value = container.value.offsetHeight
}
const interval = ref(1000 * 30)

onMounted(async () => {
  await loadData()
  socket.receiveMessage('visual-pannel-update', async () => {
    await loadData()
  })
})

onUnmounted(() => {
  socket.removeAllListeners('visual-pannel-update')
})
</script>

<template>
  <div class="ps_container" ref="container">
    <el-carousel class="box" :style="{ height: height + 'px' }" :interval="interval">
      <el-carousel-item v-for="item in pictureList" :key="item">
        <el-image style="width: 100%; height: 100%" :src="item.url" fit="contain" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 600px;
}

:deep(.el-carousel__container) {
  width: 100%;

  height: 100%;
}
</style>
